<template>
  <view class="dy-scroll-container">
    <dy-navbar title="switch 开关" />
    <scroll-view class="dy-scroll" scroll-y="">
      <dy-card class="dy-flex-column">
        <dy-section slot="title" title="基础用法" />
        <dy-switch slot="body" />
      </dy-card>

      <dy-card class="dy-flex-column">
        <dy-section slot="title" title="禁用状态" />
        <dy-switch slot="body" disabled />
      </dy-card>

      <dy-card class="dy-flex-column">
        <dy-section slot="title" title="开关类型" />
        <template slot="body">
          <view class="dy-align-center">
            <text class="dy-mg-right-18 dy-fz-16">线框模式</text>
            <dy-switch type="line" />
          </view>
          <view class="dy-align-center dy-mg-top-16">
            <text class="dy-mg-right-18 dy-fz-16">实底模式</text>
            <dy-switch type="fill" />
          </view>
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title" title="自定义颜色" />
        <template slot="body">
          <dy-switch class="dy-mg-top-16" active-color="#ff508a" inactive-color="#888888" />
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title" title="设置开关值" />
        <template slot="body">
          <view>
            <view>
              {{ demo4Val }}
            </view>
            <dy-switch
              v-model="demo4Val"
              class="dy-mg-top-16 dy-mg-right-8"
              active-value="open"
              inactive-value="close"
            />
          </view>
          <view>
            <view>
              {{ demo4 }}
            </view>
            <dy-switch
              v-model="demo4"
              class="dy-mg-top-16 dy-mg-right-8"
              :active-value="1"
              :inactive-value="0"
            />
          </view>
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title" title="加载状态" />
        <template slot="body">
          <view class="dy-align-center">
            <text class="dy-mg-right-18 dy-fz-16">菊花</text>
            <dy-switch :loading="isLoading" loading-type="spinner" />
          </view>
          <view class="dy-align-center dy-mg-top-16">
            <text class="dy-mg-right-18 dy-fz-16">圆环</text>
            <dy-switch :loading="isLoading" loading-type="round" />
          </view>
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title" title="设置尺寸（默认单位rpx）" />
        <template slot="body">
          <view class="dy-align-center">
            <text class="dy-mg-right-18 dy-fz-16">数值格式 50</text>
            <dy-switch :size="50" />
          </view>
          <view class="dy-align-center dy-mg-top-16">
            <text class="dy-mg-right-18 dy-fz-16">字符串格式 '50rpx'</text>
            <dy-switch size="50rpx" />
          </view>
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title" title="不触发短促震动（iOS的微信小程序有效）" />
        <template slot="body">
          <dy-switch :vibrate-short="false" />
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'DySwitch',
  data() {
    return {
      demo4Val: 'close',
      demo4: 0,
      isLoading: true
    }
  }
}
</script>
<style lang="scss" scoped>
.code {
  padding: 16px;
  margin: 8px 0;
  font-size: 14px;
  color: #888888;
  background: #f8f8f8;
  border-radius: 8px;
}
</style>
